<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>{$data['activity_title']}</title>
		<link rel="stylesheet" type="text/css" href="/static/index/css/template1.css" />
		<link rel="stylesheet" type="text/css" href="/static/index/css/mobileSelect.css"/>
		<link href="https://cdn.bootcss.com/Swiper/4.2.6/css/swiper.min.css" rel="stylesheet">
	</head>
	<body class="flex flex-column">
		<div class="content flex-1" id="content" style="overflow: hidden;">
			<div id="box">
				<div class="main-banner" id="main-banner">
					<img src="{$data['activity_banner']}" class="full-width" />
					<p class="main-banner-wg ac full-width">当前已有345人报名，围观群众55478人</p>
				</div>
				<p class="ac last-time border-b bg">距离活动倒计时：5天4小时5分23秒</p>
				<ul class="pagination bg" id="pagination"></ul>
				<div class="swiper-container" id="banner">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img class="full-width swiper-lazy" src="{$data['activity_rule']}" />
							<div class="swiper-lazy-preloader"></div>
						</div>
						<div class="swiper-slide">
							<img class="full-width swiper-lazy" data-src="{$data['activity_introduce']}" />
							<div class="swiper-lazy-preloader"></div>
						</div>
						<div class="swiper-slide">
							<img class="full-width swiper-lazy" data-src="{$data['activity_rule']}" />
							<div class="swiper-lazy-preloader"></div>
						</div>
					</div>
				</div>
				<p class="support ac border-t bg">活动策划：<a href="" target="_blank">布客艺培商学院</a></p>
				<div class="mask" id="mask">
						<div class="mask-content bg">
							<h1 class="ac fs-16" style="line-height: 20px;font-weight: 300;">感谢你报名参加我们的活动，原价1298元的新星卡，现在最低仅需298元</h1>
							<p class="ac fs-14" style="font-weight: 700;margin-top: 10px;">你正在参加万丰的团购</p>
							<input type="text" class="baoming border full-width" name="" id="" value="" placeholder="请输入您的宝贝名字"/>
							
							<input type="text" class="baoming border full-width" name="" id="" value="" placeholder="请输入您的手机号码"/>
							<div id="trigger1" class="">请选择您附近的门店</div>
							<input type="checkbox" name="" id="" value="" />我是老生
							<div class="baoming-btn ac full-width baoming-sure" onclick="submit();">
								确认报名
							</div>
							<div class="baoming-btn flex full-width baoming-cacel">
								<div class="flex-1 ac baoming-tel">
									<a href="tel:18270723799">电话咨询</a>
								</div>
								<div class="flex-1 ac baoming-see border" onclick="fadeBaoMing();">
									我再看看
								</div>
							</div>
						</div>

				</div>
				<div class="mask2" id="mask2">
						<div class="mask-content bg">
							<p class="ac">长按识别下方二维码联系客服</p>
							<img src="{$data['owner_qrcode']}" class="full-width"/>
							<div class="baoming-btn ac full-width baoming-sure" onclick="hideKf();">
								关闭
							</div>
						</div>
				</div>
			</div>
		</div>
		<ul class="footer flex flex-row border-t text-center bg">
			<li class="flex-1 border-r" onclick="showZx();">
				<i class="iconfont icon-lijizixun"></i>
				<span>立即咨询</span>
				<ul class="footer-zixun-child " id="zxChild">
					<!--<li class="border-b">省钱攻略</li>-->
					<li class="border-b">
						<a href="tel:18270723799">拨打电话</a></li>
					<li onclick="showKf();">客服微信</li>
				</ul>
				<div class="arrow-icon ac" id="arrow"></div>
			</li>
			<li class="flex-1 border-r" id="footer-baoming" onclick="fadeBaoMing();">
				<i class="iconfont icon--"></i> 立即报名
			</li>
			<li class="flex-1">
				<i class="iconfont icon-guanyuwomen"></i> 关于我们
			</li>
		</ul>
		<a href="{:url('index/Index/complaint')}" class="text-center complaint" id="complaint">投诉</a>
		<script src="https://cdn.bootcss.com/Swiper/4.2.6/js/swiper.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script src="/static/index/js/mobileSelect.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mySwiper = new Swiper('#banner', {
				paginationType: 'custom',
				lazy: {
					loadPrevNext: true,
				},
				pagination: {
					el: '.pagination',
					clickable: true,
					renderBullet: function(index, className) {
						var swiperTxt;
						switch(index) {
							case 0:
								swiperTxt = '活动规则';
								break;
							case 1:
								swiperTxt = '品牌介绍';
								break;
							default:
								swiperTxt = '亲友团';
								break;
						}
						return '<li class="ac ' + className + '">' + swiperTxt + '</li>';
					}
				},
				on: {
					init: function() {},
					slideChangeTransitionStart: function() {
						var scrollTop = document.getElementById("box").scrollTop;
						var offsetTop = document.getElementById("banner").offsetTop;
						if (scrollTop > offsetTop) {
							document.getElementById("box").scrollTop = offsetTop;
						}
						var H = $(".swiper-slide").eq(this.activeIndex).find('img').height();
						$(".swiper-slide").css('height', H + 'px');
						$(".swiper-wrapper").css('height', H + 'px');
						
					},
					slideChangeTransitionEnd:function () {
					}
				}
			});
			function overscroll(el) {
				el.addEventListener('touchstart', function() {
					var top = el.scrollTop,
						totalScroll = el.scrollHeight,
						currentScroll = top + el.offsetHeight;
					if(top === 0) {
						el.scrollTop = 1;
					} else if(currentScroll === totalScroll) {
						el.scrollTop = top - 1;
					}
				});
				el.addEventListener('touchmove', function(evt) {
					if(el.offsetHeight < el.scrollHeight)
						evt._isScroller = true;
				});
			}
			overscroll(document.querySelector('#box'));
			document.addEventListener('touchmove', function(evt) {
				if(!evt._isScroller) {
					evt.preventDefault();
				}
			});
			document.getElementById("box").addEventListener('click', function() {
				if ($('#zxChild').css('display') == 'block') {
					$('#zxChild').hide();
					$('#arrow').hide();
				}
			});
			function FixTop(elementId,scrollObj) {
				var elementId = document.getElementById(elementId);
				var objOffset = elementId.offsetTop;
//				console.log("对象高度"+ objOffset);
				if (!scrollObj) {
					scrollObj = window;
				}
				scrollObj.onscroll = function() {
					var bodyScrollOffset = scrollObj.scrollTop;
					//console.log('往下滚动距离高度'+ bodyScrollOffset);
					var Result = objOffset - bodyScrollOffset;
					//console.log("对象减去滚动高度"+ Result);
					if(bodyScrollOffset >= objOffset) {
						elementId.style.position = "fixed";
						elementId.style.top = 0;
						elementId.style.background = 'white';
						elementId.style['z-index'] = 99;
						$('#complaint').hide();
					} else {
						elementId.style.position = 'static';
						$('#complaint').show();
						elementId.style['z-index'] = 4;
					}
					
				}
			}
			FixTop('pagination',document.getElementById("box")); //此处填入被固定对象的ID
			var mobileSelect = new MobileSelect({
			    trigger: '#trigger1',
			    title: '选择门店',
			    keyMap: {
		            id:'id',
		            value: 'name'
		        },
			    wheels: [
			                {	
			                	data:[
				                	{id:1, name:'赣州店'},
				                	{id:2, name:'吉安店'}
			                	]
			                }
			            ],
//			    position:[2], //初始化定位
			    callback:function(indexArr, data){
			        console.log(data); //返回选中的json数据
			        $('#trigger1').html(data.name);
			    } 
			});
			function fadeBaoMing () {
				var scrollTop = document.getElementById("box").scrollTop;
//				if (scrollTop >= 100) {
					$('#mask ').css({'top': scrollTop + 'px', 'z-index':9999});
//				}
				if ($('#mask').css('display') == 'none') {
					$('#mask').slideDown();
					$('#box').css({'overflow':'hidden'});
				} else {
					$('#mask').slideUp();
					$('#box').css({'overflow':'scroll'});
				}
			}
			function showZx() {
				$('#arrow').toggle();
				$('#zxChild').toggle();
			}
			function showKf() {
				$('#mask').hide();
				var scrollTop = document.getElementById("box").scrollTop;
				$('#mask2 ').css({'top': scrollTop + 'px'});
				if ($('#mask2').css('display') == 'none') {
					$('#mask2').slideDown().css({'z-index':99});
					$('#box').css({'overflow':'hidden'});
				} else {
					$('#mask2').slideUp().css({'z-index':2});
					$('#box').css({'overflow':'scroll'});
				}
			}
			function hideKf() {
				$('#mask2').hide();
				$('#mask2 ').css({'z-index':2});
				$('#box').css({'overflow':'scroll'});
			}
			function submit() {
				fadeBaoMing();
			}
		</script>
	</body>

</html>